<template>
	<view class="grid" :class="['col-'+props.count,menuBorder?'sm-border':'',menuCard?'card-menu ':'']">
		<view class="margin-0 flex justify-center padding-xs" v-for="(item,index) in list" :key="index"
			:data-index="index" @click="handleSelect(item,index)">
			<view v-if="!item.openType" class="text-center">
				<view v-if="item.image" class="cu-avatar" :class="props.iconStyle"
					:style="'background-image:url('+item.image+');'"></view>
				<view v-else :class="'cuIcon-'+item.cuIcon+' text-'+item.color+' '+props.iconStyle"></view>
				<view class="text-black text-size-26">{{item.name}}</view>
			</view>
			<button :plain="true" class="text-center" v-else :open-type="item.openType">
				<view v-if="item.image" class="cu-avatar" :class="props.iconStyle"
					:style="'background-image:url('+item.image+');'"></view>
				<view v-else :class="'cuIcon-'+item.cuIcon+' text-'+item.color+' '+props.iconStyle"></view>
				<view class="text-black text-size-26">{{item.name}}</view>
			</button>
		</view>
	</view>
</template>

<script setup lang="ts">
	const emit = defineEmits(['action']);
	const props = defineProps({
		menuBorder: {
			type: [Boolean, String],
			default: false
		},
		menuCard: {
			type: [Boolean, String],
			default: false
		},
		menuArrow: {
			type: [Boolean, String],
			default: false
		},
		count: {
			type: [Number, String],
			default: 4
		},
		iconStyle: {
			type: String,
			default: "size-42"
		},
		list: Array
	})
	const handleSelect = (e : any, index : number) => {
		emit('action', e, index)
	}
</script>

<style scoped lang="scss">
	button[plain] {
		background-color: transparent;
		border: none;
		color: #353535;
		font-size: 18px;
		line-height: 2;
		padding: 0;
	}

	.grid {
		border-radius: 6rpx;
	}

	.cu-avatar {
		background: none;
		background-size: 100% 100%;
		width: 53rpx;
		height: 53rpx;
		margin-bottom: 8px;
	}
</style>